﻿@model MultiStepDemo.ViewModels.TestingViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using MultiStepDemo.Utils
<h2>
    Testing page</h2>
Time left:
<div id="timeLeft" name="timeLeft" style="color: Red;">
</div>
@{Html.BeginForm("Index", "Testing", null, FormMethod.Post, new { id = "testingForm" });}
@Html.HiddenFor(c => c.StartTime, Model.StartTime)
@Html.HiddenFor(c => c.TestTime, Model.TestTime)
<table>
    @for (var i = 0; i < Model.Questions.Count; i++)
    {
        <tr>
            <td>
                <table>
                    <tr>
                        <td>@((i + 1 + (5 * ((int)ViewData[Constants.PAGE_INDEX] - 1))).ToString())
                        </td>
                        <td>@Model.Questions[i].Title
                        </td>
                    </tr>
                    @for (var j = 0; j < Model.Questions[i].Answers.Count; j++)
                    {
                        <tr>
                            <td>
                                <input type="radio" name="@Model.Questions[i].Id" value="@Model.Questions[i].Answers[j].Id" id="selAns@(j + 1)" @Html.Raw(Model.Questions[i].SelectedAnswer == Model.Questions[i].Answers[j].Id ? "checked" : "")/>
                            </td>
                            <td>@Model.Questions[i].Answers[j].Content
                            </td>
                        </tr>
                    }
                </table>
            </td>
        </tr>
    }
</table>
<!--  start paging..................................................... -->
<table border="0" cellpadding="0" cellspacing="0" id="paging-table">
    <tr>
        <td>
            @Html.HiddenFor(c => c.PageIndex, new { id = "PageIndex" })
            @Html.HiddenFor(c => c.SelectedAnswer, new { id = "SelectedAnswer" })
            @Html.HiddenFor(c => c.SelectedQuestion, new { id = "SelectedQuestion" })
            @if ((int)ViewData[Constants.TOTAL_PAGE] > 1)
            {
                string prePage = ((int)ViewData[Constants.PAGE_INDEX] - 1) < 1 ? "1" : ((int)ViewData[Constants.PAGE_INDEX] - 1).ToString();
                string nextPage = ((int)ViewData[Constants.PAGE_INDEX] + 1) > (int)ViewData[Constants.TOTAL_PAGE] ? ViewData[Constants.TOTAL_PAGE].ToString() : ((int)ViewData[Constants.PAGE_INDEX] + 1).ToString();

                if ((int)ViewData[Constants.PAGE_INDEX] > 1)
                {
@*<a class = "page-far-left" href="@(Url.Content("~/Testing/Paging/1"))">First</a>
                <a class = "page-left" href="@(Url.Content("~/Testing/Paging/" + prePage))">Previous</a>*@
                <input type="submit" value="First" onclick="Submit(1);" />
                <input type="submit" value="Previous" onclick="Submit(@prePage);" />
                }
                <div id="page-info">
                    Trang <strong>@ViewData[Constants.PAGE_INDEX]</strong> / @ViewData[Constants.TOTAL_PAGE]</div>

                                                                        if ((int)ViewData[Constants.PAGE_INDEX] < (int)ViewData[Constants.TOTAL_PAGE])
                                                                        {
                <input type="submit" value="Next" onclick="Submit(@nextPage);" />
                <input type="submit" value="Last" onclick="Submit(@ViewData[Constants.TOTAL_PAGE]);" />
@*<a class = "page-right" href="@(Url.Content("~/Testing/Paging/" + nextPage))">Next</a>
                <a class = "page-far-right" href="@(Url.Content("~/Testing/Paging/" + ViewData[Constants.TOTAL_PAGE].ToString()))">
                    Last </a>*@
                                                                        }
            }
        </td>
    </tr>
</table>
<!--  end paging................ -->
@{Html.EndForm();}
<script type="text/javascript">
    var timeTest = @Model.TimeLeft
    var intervalVal = 0;

    $(document).ready(function () {
        intervalVal = setInterval("UpdateTime()", 1000);
    });

    function UpdateTime()
    {
        var timeString = "";

        timeTest--;
        //submit to server if end time
        if(timeTest <= 0)
        {
            clearInterval(intervalVal);
            alert("Time end to do the test");
            Submit(1);
        }

	    var hour = Math.floor(timeTest/3600);
	    var leftuSec = timeTest % 3600;
	    var minute = Math.floor(leftuSec/60);
	    var second = leftuSec % 60;

        if (hour < 10)
            hour = "0" + hour;
        if (minute < 10)
            minute = "0" + minute;
        if (second < 10)
            second = "0" + second;

        timeString = hour + ":" + minute + ":" + second;

        $("#timeLeft").html(timeString);
    }

    function Submit(pageIndex) {
        var questions = "";
        var answers = "";

        //set pageIndex request
        $("#PageIndex").val(pageIndex);

        //set question and answer
        //$('input[name=radioName]:checked')
        $('[type=radio]:checked').each(function (index) {
            var questionId = this.name;
            var answerId = this.value;
            questions += questionId + "|";
            answers += answerId + "|";
        });

        //set question and answer
        $("#SelectedAnswer").val(answers);
        $("#SelectedQuestion").val(questions);

        document.forms["testingForm"].submit();
    }
</script>